<template>
  <div class="echarts-map" ref="map"></div>
</template>
<script setup>
import * as echarts from "echarts";
import { getChina } from "@/api/getMapData.js";
// import {getAllSite} from '@/api/index.js'
import symbolPic from "@/assets/mark.png";
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { city } from "@/assets/mapData/point.js";

const map = ref();
const mapJson = ref(); //地图块
const citys = ref(); //散点
citys.value = city;
const stationArr = ref([]); //所有站点
const router = useRouter();

onMounted(() => {
  getChina().then((res) => {
    mapJson.value = Object.assign(
      { type: "FeatureCollection" },
      { features: res.features }
    );
    initMap(mapJson.value, stationArr.value);
  });
});

const initMap = (json, arr) => {
  const myChart = echarts.init(map.value, null, {
    renderer: "svg",
  });
  echarts.registerMap("China", json);
  const option = {
    backgroundColor: "#0e1f21",
    geo: {
      map: "China",
      aspectScale: 0.75,
      zoom: 1.4,
      left: "center",
      top: "30%",
      label: {
        show: true,
        fontSize: 8,
        color: "#fff",
      },
      emphasis: {
        show: true,
        fontSize: 8,
        color: "#fff",
      },
      itemStyle: {
        areaColor: "#132d30",
        borderColor: "#132d30",
        borderWidth: 1,
      },
      emphasis: {
        areaColor: "#132d30",
        borderWidth: 1,
        borderColor: "#132d30",
      },
    },
    series: [
      {
        type: "scatter",
        silent: false,
        coordinateSystem: "geo",
        itemStyle: {
          color: "#9f9a5f",
        },
        symbolSize: 1,
        postEffect: {
          enable: true,
        },
        data: citys.value,
      },
      {
        name: "",
        type: "effectScatter",
        coordinateSystem: "geo",
        symbol: `image://${symbolPic}`,
        symbolSize: [30, 30],
        data: arr,
        label: {
          show: false,
          position: "top",
          formatter: function (params) {
            return params.name;
          },
          lineHeight: 1,
          borderColor: "transparent",
          borderWidth: 1,
          borderRadius: 15,
          color: "#00ffff",
          fontSize: 16,
          emphasis: {
            show: true,
            position: "top",
            formatter: function (params) {
              return params.name;
            },
          },
        },
      },
    ],
  };
  myChart.setOption(option);
  myChart.on("click", (param) => {
    if (param.data) {
      if (param.data.id) {
        const id = param.data.id;
        router.push({
          name: "list",
          query: {
            station: id, //站点id
          },
        });
      }
    }
  });
};
</script>
<style scoped lang="scss">
.echarts-map {
  width: 120%;
  height: 120%;
  margin-top: -100px;
  margin-left: -200px;
}
</style>
